<template>
    <u-popup :mask-close-able="false" :custom-style="{
      background:'transparent',
      width:'100vw',
      height:'100vh',
      color:'#fff'
    }" mode="bottom" border-radius="0" v-model="isShowPop">
     <view class="z-record">
  
      <!-- <button type="primary" style="width: 500rpx;" @click="upload">点击上传</button> -->
	
        <view class="box" style=""> 
							<textarea :maxlength="-1" auto-height class="index-inp-inner" :placeholder-style="{
                color:'#fff'
              }" placeholder="..." 
							confirm-type="send" style="font-size: 30rpx;" 
							cursor-spacing="40" @confirm="sendMessage" 
						 
							ref="inputRef" v-model="inputcontent" /> 
						</view> 

        <view class="">轻触气泡可以修改文字</view>
        
        <view class="flex-2">
          <view class="blo" @tap="close">
            <view class="icon">
              <uni-icons type="closeempty" color="#80E58B" size="25" @click="micClick"></uni-icons>
            </view>
           
            取消
          </view>

          <view class="blo" @tap="sendMessage">
            <view class="icon">
              <uni-icons type="checkmarkempty" color="#80E58B" size="25" @click="micClick"></uni-icons>
            </view>
           
            发送
          </view>
        </view>


        <view class="bottom">
          <view class="txt">按住说话，松开识别</view>
        <view class="rel">
          
          <view class="hu">
			
          </view>
          <view class="back">

         
       </view>
        <!-- #ifdef H5 -->
       <text @touchmove="recordMove" @mouseup="endRecord" @mousedown="startRecord" >
        <uni-icons class="mic" type="mic" color="#80E58B" size="40"></uni-icons>
    
       </text>
        <!-- #endif -->

         <!-- #ifndef H5 -->
       <text @touchmove="recordMove" @touchend="endRecord" @touchstart="startRecord" >
        <uni-icons class="mic" type="mic" color="#80E58B" size="40"></uni-icons>
       
       </text>
        <!-- #endif -->



      <!-- #ifdef H5 -->
       <mumu-recorder ref='mumu-recorder' @success='handlerSuccess' @error='handlerError'></mumu-recorder>
       <!-- #endif -->
        </view>

      </view>
    </view>
 
 </u-popup>

</template>
 
<script>
 
let s;

const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
 
innerAudioContext.autoplay = true;


import MumuRecorder from '@/uni_modules/mumu-recorder/components/mumu-recorder/mumu-recorder.vue'
 export default {
  
   props: {
   },
   data() {
     return {
      inputcontent:'',
        isShowPop:false,
        voicePath: '',
        isRecording:true,
        status:false,
        recorder:null,
     }
   },
   async created(){
      s = this
     
		recorderManager.onStop(function (res) {
			console.log('recorder stop' + JSON.stringify(res));
			s.voicePath = res.tempFilePath;
      console.log(s.voicePath,'sdsdsd')
		});
   },
   methods: {
    upload(){
      uni.chooseFile({
					
					//第一步:选择文件
				  count: 1, //默认100
				  extension:['.pdf','.doc','.xlsx','.docx','.xls','.mp3'],
					success: function (res) {
						const tempFilePaths = res.tempFilePaths;//若果只选择一个文件,这个文件就是数组的第一个元素
						//第二步:把选择的文件上传到服务器
            console.log(tempFilePaths,'aaaaaa')
						s.getText(tempFilePaths[0])
					}
				})
    },

    getUniText(url) {

      // let action = uni.getStorageSync('host')+'/gptcms/api/tool/videottext'
      let action = uni.getStorageSync('host')+'/gptcms/api/uploadfile'
      let wid = uni.getStorageSync('wid')
      let h5Token = uni.getStorageSync('h5Token')
      uni.uploadFile({
				url: action,
        filePath: url,
        // // ifdef H5
				// file: url,
        // filePath:url,
        // // endif

        // // ifndef H5
				// filePath: url,
        // // endif

        

				name: '',
				formData: {

        },
				header: {
          wid:wid,
          token:h5Token
        },
				success: res => {
          s.isRecording = false
					// 判断是否json字符串，将其转为json格式
					let data = this.toJson && this.$u.test.jsonString(res.data) ? JSON.parse(res.data) : res.data;
					console.log(res,data,'22222aaaaa')
          if (![200, 201, 204].includes(res.statusCode)) {
						// this.uploadError(index, data);
            console.log('上传失败')
					} else {
						// 上传成功
            console.log(res,'aaaaa')
					}
				},
				fail: e => {
            console.log(e,'ggggg')
            s.isRecording = false
				},
				complete: res => {
          s.isRecording = false
					console.log(res,'enddddd')
				}
			});
			
               
               
            },

            getH5Text(res){
              // data
              // .localUrl
            
const file = new window.File(
  [res.data],
  'test.mp3', {
    type: 'audio/mpeg'
  }
)
const form1 = new FormData()
form1.append('file', file)
// let action = uni.getStorageSync('host')+'/gptcms/api/uploadfile'
let action = uni.getStorageSync('host')+'/gptcms/api/tool/videottext'
      let wid = uni.getStorageSync('wid')
      let h5Token = uni.getStorageSync('h5Token')
fetch(action, {
    method: 'POST',
    headers: {
      wid:wid,
      token:h5Token
    },
   body:form1
  }).then((res) => {
    console.log(res,'fffffff')
  })


            },
            handlerOnCahnger() {
                if (this.status) {
                    this.$refs['mumu-recorder'].stop()
                } else {
                    this.$refs['mumu-recorder'].start()
                }
                this.status = !this.status
            },
            handlerSuccess(res) {
              console.log(res)
              // let blob = res.data
            //   var file  = new File(
            //     [blob],'test.mp3',
            //  )
            //   console.log(file)
            //  let url =  URL.createObjectURL(file)
            //  const formData = new window.FormData(); 
            //   formData.append(file.name, file);
            //  console.log(url)
             s.getH5Text(res)
               
               
            },
            handlerError(code) {
              s.isRecording = false
                switch (code) {
                    case '101':
                    this.$u.toast('当前浏览器版本较低，请更换浏览器使用，推荐在微信中打开。'
                        )
                        break;
                    case '201':
                    this.$u.toast('麦克风权限被拒绝，请刷新页面后授权麦克风权限。'
                        )
                        break
                    default:
                    this.$u.toast('未知错误，请刷新页面重试'
                        )
                        break
                }
            },
    
    recordMove(e){
      let boundery=e.currentTarget.offsetTop
				if(e.touches[0].clientY<boundery&&!this.isShowTips){
					// #ifdef MP
          recorderManager.pause()
					// #endif
				
				}
				if(e.touches[0].clientY>=boundery){
					// #ifdef MP
          recorderManager.resume()
					// #endif
				
				}			
    },
    startRecord() {
			console.log('开始录音');
      s.isRecording = true
       // #ifdef H5
       this.$refs['mumu-recorder'].start()   
       this.status = !this.status
       // #endif


        // #ifndef H5
        
			recorderManager.start(
        {
					format:'mp3'
				}
      );
       // #endif

     
		},
		endRecord() {
			console.log('录音结束');
       // #ifdef H5
       this.$refs['mumu-recorder'].stop()   
       this.status = !this.status
       // #endif


        // #ifndef H5
        recorderManager.stop();
       // #endif
			
		},
    close(){
      this.isShowPop = true
    },
    sendMessage(){

    },
     show(){
         s.isShowPop = true
     },
   
   }
 }
</script>
<style scoped lang="scss">
.z-record{
  height: 100vh;
  color:#fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .box{
    margin: 20px;
    background: linear-gradient(to right, #7CD887,#75CCD1);
    min-height: 220rpx;
    border-radius: 15px;
    padding: 14px;
  }
  .blo{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .icon{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #515151;
    margin-top: 20px;
    margin-bottom: 6px;
  }
  .flex-2{
    padding: 80px 70px 30px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bottom{
    position: fixed;
    bottom: 0;
   
   
    .txt{
      display: flex;
      justify-content: center;
      margin-bottom: 100rpx;
    }
  }
  .back{
    position: relative;
    z-index: 2;
    padding: 20px;
    height: 50px;
    width: 100vw;
    background: #2F313F;
    display: flex;
    justify-content: center;
  }
  .rel{
    position: relative;
  }
  .hu{
    z-index: 1;
    position:absolute;
    background: #2F313F;
			// left: -20%;
      top: -80rpx;
      left: 0vw;
			width: 100vw;
			height: 200rpx;
		
			border-radius: 50%;
  }
  .mic{
    position: absolute;
    z-index: 3;
    top: -30px;
    left: calc(50% - 20px);
  }
}
</style>
 